<!DOCTYPE html>
<html>
<head>
    <title>我的订单</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userTravels.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        var user = JSON.parse(sessionStorage.getItem("user"));
        var currentPage = 1; //当前页
        var pages; //总页数
        var ticketDetails; //
        var keyword;
        var keywordDetails;
        $(function () {
            $.get("/users/" + user.id + "/ticketDetails", {pageSize: 10}, function (data) {
                $("#pills-ticket").renderValues(data);
                pages = data.pages;
                ticketDetails = data.list;
            })

            $(".ticketSearchBtn").change(function () {
                currentPage = 1;
                keyword = $(this).val();
                $.get("/users/" + user.id + "/ticketDetails", {pageSize: 5, keyword: keyword}, function (data) {
                    $("#pills-ticket").renderValues(data);
                    pages = data.pages;
                    keywordDetails = data.list;
                })

            })

            //设置窗口的滚到事件
            $(window).scroll(function () {
                if (isEnd()) {
                    if (currentPage < pages) {
                        currentPage++;
                        console.log(keyword);
                        if(keyword){
                            var args = {currentPage: currentPage, pageSize: 5,keyword:keyword};
                        }else {
                            var args = {currentPage: currentPage, pageSize: 3};
                        }

                        $.get("/users/" + user.id + "/ticketDetails", args, function (data) {
                            //数据渲染
                            if(keyword){
                                $.merge(keywordDetails, data.list);
                                $("#pills-ticket").renderValues({list: keywordDetails});
                            }else {
                                $.merge(ticketDetails, data.list);
                                $("#pills-ticket").renderValues({list: ticketDetails});
                            }
                        });
                    } else {
                        $(document).dialog({
                            type: "notice",
                            infoText: "已经到底部了",
                            autoClose: 1500,
                            position: "center"
                        });
                    }
                }
            });
        })

    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="/mine/profiles.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <span>我的订单</span>
            </div>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <!--选项卡-->
    <li class="nav-item" data-index="pills-1">
        <a data-tid="xx" class="nav-link  active show" data-toggle="pill" href="#pills-ticket">我的门票</a>
    </li>
    <li class="nav-item" data-index="pills-2">
        <a data-tid="xx" class="nav-link" data-toggle="pill" href="#pills-hotel">我的酒店</a>
    </li>

</ul>

<!-- 选项卡对应的内容 -->
<div class="tab-content" id="pills-tabContent">

    <!-- 标签页的内容 -->
    <div class="tab-pane fade active show" id="pills-ticket">
        <div class="search-head">
            <div class="row nav-search">
                <div class="col-12">
                    <div class="input-group-sm search">
                        <input class="form-control ticketSearchBtn" placeholder="查询门票订单">
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <table class="table .table-responsive">
            <tr>
                <th>景点</th>
                <th>购买时间</th>
                <th>有效期</th>
                <th>类型</th>
                <th>张数</th>
            <tr/>
        </table>
        <div class="container ticket" render-loop="list">
            <table class="table .table-responsive">
                <tr>
                    <td render-html="list.scenicSpot.scenicSpotName"></td>
                    <td render-html="list.buyingdate"></td>
                    <td render-html="list.validitydate"></td>
                    <td render-html="list.type"></td>
                    <td render-html="list.number"></td>
                </tr>
            </table>

        </div>
        <hr>
    </div>


    <div class="tab-pane fade" id="pills-hotel">
        <div class="search-head">
            <div class="row nav-search">
                <div class="col-12">
                    <div class="input-group-sm search">
                        <input class="form-control searchBtn" placeholder="查询订单">
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <h6>当季推荐</h6>
            <div class="row hot">
                <div class="col ">
                    <a href="../strategyCatalogs.html?id=5">
                        <img src="/upload/530bb06c-47b9-4371-9699-705d78f17bd6.jpeg">
                        <p>0次浏览</p>
                    </a>
                </div>
                <div class="col ">
                    <a href="../strategyCatalogs.html?id=6">
                        <img src="/upload/c9eb542e-fcf8-4bff-8a73-d7a2f241b402.jpeg">
                        <p>0次浏览</p>
                    </a>
                </div>
            </div>
        </div>
        <hr>
        <div class="container">
            <h6>全部攻略</h6>
            <div class="row classify ">
                <div class="col-6 mb">
                    <a href="../strategyCatalogs.html?id=5">
                        <img class="float-left " src="/upload/530bb06c-47b9-4371-9699-705d78f17bd6.jpeg">
                        <div class="classify-text">
                            <span>巴黎</span>
                            <p>0人收藏</p>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>
